<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>闸机列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body >

<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <form class="layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" id="sno" name="sno" placeholder="请输入设备编号" autocomplete="off" class="layui-input" />
            </div>
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-gate-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </form>
</blockquote>

<!--数据列表-->
<table class="layui-hide" id="gateTable" lay-filter="gate-table"></table>

<script type="text/html" id="gate-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="records"><i class="layui-icon layui-icon-transfer"></i>访问记录</a>

</script>

<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/token.js"></script>
<script src="../../js/config.js"></script>

<script>
    layui.use(['table','form'], function() {
        var $ = layui.$;
        var gateTable = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        gateTable.render({
            elem: '#gateTable'
            , id: 'gate-table-id'//重载需要
            , url: HOST+'gate/getByPage'
            , title: '闸机表'
            , cols: [[
                {type: 'numbers',title: '序号'}
                , {field: 'sno', align: 'center',width : 165, title: '设备编号'}
                , {field: 'deviceName', align: 'center',width : 165, title: '设备名称'}
                , {field: 'deviceType', align: 'center',width : 165, title: '设备类型'}
                , {field: 'powerTime', align: 'center',width : 165, title: '启用时间'}
                , {field: 'gateLoc', align: 'center',width : 165, title: '位置'}
                , {toolbar: "#gate-toolbar",align : 'center',width:200, title: "操作" , fixed:"right"}
            ]]
            , page: true
            ,page: {
                curr: layui.data("gate_page").index
            },
            done:function (res, curr, count) {
                layui.data("gate_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        //搜索操作
        form.on('submit(search-gate-submit)', function (data) {
            gateTable.reload('gate-table-id', {
                where: {"sno": data.field.sno}
                , page: {
                    curr: 1
                }
            });
            return false;
        });


               //表操作  监听操作
        gateTable.on('tool(gate-table)', function (obj) {
            var data=obj.data;
            var event = obj.event;
            if (event === 'edit') {
                layer.open({
                    type:2
                    ,title:"编辑闸机信息"
                    ,skin:'layui-layer-molv'
                    ,area: ['95%','95%']
                    ,content:(encodeURI("update_gate.html?id="+data.gateId+"&gateLoc="+data.gateLoc+"&gateDirection="+data.gateDirection+
                        "&sno="+data.sno+"&powerTime="+data.powerTime+"&deviceName="+data.deviceName+"&deviceType="+data.deviceType))  //js获取url参数
                });
            }else if(event=='records'){
                layer.open({
                    type:2
                    ,title:"进出记录"
                    ,skin:'layui-layer-molv'
                    ,area: ['95%','95%']
                    ,content:(encodeURI("gate_records.html?id="+data.gateId))  //js获取url参数
                });
            }
        });
    });
</script>
</body>
</html>